<template>
    <div>
        <!--轮播图-->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(image, index) in images" :key="index">
                <img :src="image.img" alt="">
            </mt-swipe-item>
        </mt-swipe>
        <!--        <h1>Home</h1>-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                <img src="../../../static/images/menu1.png" alt="">
                <div class="mui-media-body">新闻资讯</div>
            </router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
                <img src="../../../static/images/menu2.png" alt="">
                <div class="mui-media-body">图片分享</div>
            </router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../../static/images/menu3.png" alt="">
                <div class="mui-media-body">商品购买</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../../static/images/menu4.png" alt="">
                <div class="mui-media-body">留言反馈</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../../static/images/menu5.png" alt="">
                <div class="mui-media-body">视频专区</div>
            </a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                <img src="../../../static/images/menu6.png" alt="">
                <div class="mui-media-body">联系我们</div>
            </a></li>
        </ul>
    </div>
</template>

<script lang="ts">
  // @ is an alias to /src
  import {Component, Vue} from 'vue-property-decorator';

  interface ImageInterface {
    id: number;
    img: string;
  }

  @Component
  export default class Home extends Vue {
    public images: ImageInterface[] = [
      {id: 1, img: require('../../../static/images/1.jpg')},
      {id: 2, img: require('../../../static/images/2.jpg')},
      {id: 3, img: require('../../../static/images/3.jpg')},
    ];
  }
</script>
<style scoped lang="scss">
    .mint-swipe {
        height: 180px;

        .mint-swipe-item {
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .mui-grid-view.mui-grid-9 .mui-media {
        background-color: #fff;
        border: none;
        img {
            height: 60px;
            width: 60px;
        }
        div {
            font-size: 14px;
        }
    }
</style>
